<template>
	<view class="content">
		<view class="info">
			<view class="account">
				<view class="text">姓名</view>
				<input class="input" v-model="userinfo.nickname" type="text" value="" placeholder="请输入姓名" />
			</view>
			<view class="account password">
				<view class="text">电话</view>
				<input class="input" v-model="phone" type="text" value="" :placeholder="userinfo.mobile" />
			</view>
      <view class="account">
        <view class="text">您的土地亩数</view>
        <input v-model="userinfo.landarea" type="text" value="" placeholder="输入您拥有的土地亩数" />
      </view>
			<view class="code">
				<view class="text">验证码</view>
				<view class="bottom">
					<input v-model="code" type="number" value="" placeholder="请输入验证码" />
					<button @click="sendCode" :disabled="disable" :class="{get1:disable}" class="get" plain="true" type="default">{{seconds < 60 ? seconds+'后重新获取验证码' : '获取验证码'}}</button>
				</view>
			</view>
			<view  class="city">
				<view class="title">选择您的所属乡镇/村庄</view>
				<view class="show">
				  <view class="">
				    <view class="uni-list">
				      <view class="uni-list-cell">
				        <view class="uni-list-cell-left">
				          <!-- 当前选择 -->
				        </view>
				        <view class="uni-list-cell-db">
				          <picker @change="bindPickerChange1" :value="index1" :range="array1">
				            <view class="uni-input">{{array1[index1]}}
				              <image style="width: 28upx;height: 28upx;" src="../../../static/xiala.png" mode=""></image></view>
				          </picker>
				        </view>
				      </view>
				    </view>
				  </view>
				  <view>
				    <view class="uni-list">
				      <view class="uni-list-cell">
				        <view class="uni-list-cell-left">
				        </view>
				        <view class="uni-list-cell-db">
				          <picker @change="bindPickerChange3" :value="index3" :range="array3">
				            <view class="uni-input">{{array3[index3]}}
				              <image style="width: 28upx;height: 28upx;" src="../../../static/xiala.png" mode=""></image></view>
				          </picker>
				        </view>
				      </view>
				    </view>
				  </view>
				  <view>
				    <view class="uni-list">
				      <view class="uni-list-cell">
				        <view class="uni-list-cell-left">
				          <!-- 当前选择 -->
				        </view>
				        <view class="uni-list-cell-db">
				          <picker @change="bindPickerChange2" :value="index2" :range="array2">
				            <view class="uni-input">{{array2[index2]}}
				              <image style="width: 28upx;height: 28upx;" src="../../../static/xiala.png" mode=""></image></view>
				          </picker>
				        </view>
				      </view>
				    </view>
				  </view>
				</view>
			</view>
		</view>
		<view class="footer" @click="submit">
			保存
		</view>
	</view>
</template>

<script>
	import citySelect from '../../u-city-select.vue';
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	import xflSelect from '@/components/xfl-select/xfl-select.vue'; 
	import {mapState} from 'vuex';
	export default {
		components: {
			citySelect,
			msDropdownMenu,
			msDropdownItem,
			xflSelect
		},
		data() {
			return {
				params:{},
				city1:this.$store.state.user.area,//省
				city2:'',//市
				city3:'',//区
				city_value: false,//地址打开
				city: '',
				userinfo: {},
				seconds: 60,
				disable: false,
        landarea:'',//您的土地亩数
				phone: '',
				code:'',
				listBoxStyle: `height: 40px;width:200rpx font-size: 16px;`,	
				list0: [],
				list: [],//地址县
				value: 0,
				list1: [],//地址乡
				value1: null,
				list2: [],//地址镇
				value2: null,
        index: 0,
        index1: 0,
        index2: 0,
        index3: 0,
        array: ['请选择'],
        arrayid: [0],
        array1: ['请选择'],
        arrayid1: [0],
        array2: ['请选择'],
        arrayid2: [0],
        array3: ['请选择'],
        arrayid3: [0],
        lastid: null,
        cityid: null,
        areaid: null
			}
		},
		computed:{
			...mapState({
				user: state => state.user
			})
		},
		onLoad() {
			console.log(this.user.area)
			this.loadUserinfo();
			this.loadCity()
		},
		methods: {
			bindPickerChange1(e) {
			  this.index1 = e.target.value
			  let id=this.arrayid1[this.index1]
			  this.cityid = this.array1[this.index1]
			  this.index2 = 0;
			  this.index3 = 0;
			  this.array3 = ['请选择'];
			  this.array2 = ['请选择'];
			  this.loadArea(id)
			},
			bindPickerChange3(e) {
			  this.index3 = e.target.value
			  // this.floor_no = this.array3[this.index3]
			  // console.log(this.floor_no)
			  this.array2 = ['请选择'];
			  let id = this.arrayid3[this.index3]
			  this.areaid = this.array3[this.index3]
			  this.index2 = 0;
			  this.loadStreet(id)
			},
			bindPickerChange2(e) {
			  this.index2 = e.target.value
			  // this.room_no = this.array2[this.index2]
			  this.lastid = this.array2[this.index2]
			},
			async loadUserinfo(){
				await this.$http.post('/api/user/userinfo').then(res => {
					console.log(res)
					this.userinfo = res.data.data.userinfo;
					this.phone = this.userinfo.mobile;
					this.city = this.userinfo.city +','+ this.userinfo.area +','+ this.userinfo.street;
				})
			},
			//获取验证码
			sendCode(){
				let that = this;
				if(!(/^1[3456789]\d{9}$/.test(this.phone.trim()))){
					this.$u.toast('请输入正确的手机号');
					return
				}
				this.$http.post('/api/sms/send',{
					mobile: this.phone,
					event: 'changemobile'
				}).then(res => {
					// console.log(res)
					this.$u.toast('验证码已发送');
					let interval = setInterval(() => {
						--that.seconds
					}, 1000)
					this.disable = true
					setTimeout(() => {
						clearInterval(interval)
						that.disable = false
						that.seconds = 60
					}, 60000)
				})
			},
			submit(){
				if(this.phone != this.userinfo.mobile){
					if(this.code == ''){
						this.$u.toast('请输入验证码');
						return
					}
				}
				this.$http.post('/api/user/changeprofile',{
					mobile: this.phone,
					captcha: this.code,
					nickname: this.userinfo.nickname,
					city: this.cityid,
					area: this.areaid,
					street: this.lastid,
					landarea:this.landarea
				}).then(res => {
					this.$u.toast('修改成功')
					this.$store.commit('SAVE_ITEM',{
						name: 'nickname',
						data: this.userinfo.nickname
					})
					this.$store.commit('SAVE_ITEM',{
						name: 'mobile',
						data: this.phone
					})
					this.$store.commit('SAVE_ITEM',{
						name: 'city',
						data: this.userinfo.city
					})
					this.$store.commit('SAVE_ITEM',{
						name: 'area',
						data: this.userinfo.area
					})
					this.$store.commit('SAVE_ITEM',{
						name: 'street',
						data: this.userinfo.street
					})
					uni.navigateBack({
						delta:1
					})
				})
			},
			async loadCity() {
			  await this.$http.post('/api/index/address').then(res => {
			    console.log(res)
          
			    this.loadArea(res.data.data[0].id)
			    for (let i = 0; i < res.data.data.length; i++) {
			      this.array1.push(res.data.data[i].name)
			      this.arrayid1.push(res.data.data[i].id)
			    }
			    console.log(this.array)
          this.cityid=this.userinfo.city
          this.index1=this.array1.map(item => item).indexOf(this.userinfo.city)
          console.log(this.index1,'000')
			  })
			},
			loadArea(id) {
			  this.$http.post('/api/index/address', {
			    parent_id: id
			  }).then(res => {
			    
			    for (let i = 0; i < res.data.data.length; i++) {
			      this.array3.push(res.data.data[i].name)
			      this.arrayid3.push(res.data.data[i].id)
			    }
          this.index3=this.array3.map(item => item).indexOf(this.userinfo.area)
          this.loadStreet(this.arrayid3[this.index3])
          this.areaid=this.userinfo.area
          console.log(this.index3,'111')
			  })
			},
			loadStreet(id) {
			  this.$http.post('/api/index/address', {
			    parent_id: id
			  }).then(res => {
			    for (let i = 0; i < res.data.data.length; i++) {
			      this.array2.push(res.data.data[i].name)
			      this.arrayid2.push(res.data.data[i].id)
			    }
          this.lastid=this.userinfo.street
          this.index2=this.array2.map(item => item).indexOf(this.userinfo.street)
          console.log(this.index2,'222')
			  })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select{
		width: 200rpx;
	}
.content{
	min-height: 100vh;
	background-color: #F8F8F8;
	padding: 30rpx;
	box-sizing: border-box;
}
.info{
	background-color: #FFFFFF;
	
}
.account{
	margin-top: 0rpx;
	padding: 0 70rpx;
	box-sizing: border-box;
	.text{
		font-size:20px;
		font-family:PingFang SC;
		font-weight:800;
		color:rgba(51,51,51,1);
	}
	input{
		border: none;
		outline: none;
		border-bottom: 1px solid #999999;
		display: block;
		width: 100%;
		height: 70rpx;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		min-height: none;
	}
}
.password{
	margin-top: 64rpx;
}
.address{
	margin-top: 78rpx;
	padding: 0rpx 30rpx;
	box-sizing: border-box;
	.title{
		font-size:20px;
		font-family:PingFang SC;
		font-weight:800;
		color:rgba(51,51,51,1);
	}
	.desc{
		margin-top: 54rpx;
		font-size:18px;
		font-family:PingFang SC;
		font-weight:800;
		color:rgba(51,51,51,1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.code{
		margin-top: 82rpx;
		padding: 0 70rpx;
		box-sizing: border-box;
		.text{
			font-size:20px;
			font-family:PingFang SC;
			font-weight:800;
			color:rgba(51,51,51,1);
		}
		.bottom{
			margin-top: 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1px solid #999999;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			input{
				border: none;
				outline: none;
				display: block;
				flex: 1;
			}
			.get{
				border: none;
				font-size:12px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(63,195,119,1);
			}
			.get1 {
				color: #999999;
				border: 1upx solid #D2D2D2;
				border-radius: 1upx solid #D2D2D2;
			}
		}
	}
.city {
    width: 690rpx;
    margin: 0 auto;

    // margin-top: 58rpx;
    .title {
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 800;
      color: rgba(51, 51, 51, 1);
      margin-top: 88rpx;
    }

    .show {
      display: flex;
      justify-content: space-around;
      align-items: center;

      text {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 800;
        color: rgba(51, 51, 51, 1);
        margin-top: 54rpx;
      }
    }
  }  
.footer{
	width:535rpx;
	height:88rpx;
	background:rgba(63,195,119,1);
	border-radius:10px;
	margin: 80rpx auto;
	line-height: 88rpx;
	text-align: center;
	font-size:15px;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(255,255,255,1);
}
</style>
